<template>
 <div class="header">
    <div class="header-left"><span class="iconfont">&#xe653;</span></div>
    <div class="header-center"><span  class="iconfont">&#xe612;</span><input value="哈哈哈"/></div>
    <router-link to="/city">
 <div class="header-right">{{city}}<span  class="iconfont">&#xe65a;</span></div>
    </router-link>
   
</div>
</template>
<script>
export default {
  name: "HomeHeader",
  props:{
    city:String
  }
};
</script>

<style lang="scss" scoped>
@import '~style/public.scss';
@function px2rem ($px) {
  $rem: 50;
  @return ($px/$rem) +rem;
}
.header {
  height: px2rem(43);
  background: $bgcolor;
  display: flex;
  color: #ffffff;
  justify-content: flex-start;
  .header-left {
    width: 0.64rem;
    height: px2rem(43);
    line-height: px2rem(43);
    span {
      font-size: px2rem(22);

    }
  }
  .header-center {
    flex: 1;
    background: #ffffff;
    margin-left: 0.2rem;
    border-radius: 0.1rem;
    height: px2rem(32);
    display: flex;
    align-items: center;
    margin-top: px2rem(6);
    color: #111111;
    span {
      padding-left: 0.2rem;
      font-size: px2rem(20);
    }
    input {
      border: none;
    }
  }
  .header-right {
    width: 1.24rem;
    text-align: center;
    height: px2rem(43);
    line-height: px2rem(43);
    color: #ffffff;
    span{
        font-size:px2rem(10)
    }
  }
}
</style>
